<template>
  <div style="margin: 15px" class="pay">
    <el-card style="height: auto; padding-top: 0px">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        style="margin-top: -15px"
      >
      <!-- 租户 -->
        <el-tab-pane label="佣金模板" name="0" v-if="userName == '租户'">
          <span slot="label">
            <span
              style="
                display: flex;
                align-items: center;
                font-size: 18px;
                margin-top: 10px;
              "
            >
              <img
                src="@/assets/img/yjmb.png"
                style="width: 20px; height: 20px"
                v-if="activeName === '0'"
              />
              <img
                src="@/assets/img/yjmb2.png"
                style="width: 20px; height: 20px"
                v-else
              />
              <span :class="activeName === '0' ? 'textBox' : 'textBox2'" style="color:#000000;margin-left:5px"
                >佣金模板</span
              >
            </span>
          </span>
          <div class="xhxBox"></div>
          <!-- 查询表单 -->
          <div style="margin: 20px 0px 0px -10px; padding-bottom: 15px">
            <el-form :inline="true" label-position="right" label-width="80px">
              <el-form-item label="模板名称">
                <el-input
                  v-model.trim="queryParams.roleName"
                  placeholder="请输入模板名称"
                  maxlength="10"
                  clearable
                  style="margin-right: 30px; width: 200px"
                ></el-input>
              </el-form-item>

              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="queryParams.dateRange"
                  type="datetimerange"
                  align="right"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 250px; margin-right: 30px"
                  :default-time="['00:00:00', '23:59:59']"
                  value-format="yyyy-MM-dd HH:mm:ss"
            
                >
                </el-date-picker>
                <!-- <el-date-picker
                  v-model="queryParams.dateRange"
                  style="width: 200px"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions0"
                ></el-date-picker> -->
              </el-form-item>
              <el-form-item label="" style="margin-left: 40px">
                <el-button
                  icon="el-icon-refresh"
                  style="background: #eeeeee; color: #6396f4; font-weight: bold"
                  @click="resetQuery"
                  >重置
                </el-button>
                <el-button type="primary" icon="el-icon-search" @click="getList(1)"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </div>

          <el-divider></el-divider>
          <!-- tab-表格 -->
          <div style="margin: 20px 0px">
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="projectDataSummary = true"
              >新增模板</el-button
            >
            <div class="exportButton">
              <!-- <el-button
            icon="el-icon-upload2"
            @click="withdrawExport"
            style="margin-bottom: 10px; background: #f5f5f5"
            >导出</el-button
          > -->
            </div>
            <el-table
              :data="roleList"
              v-loading="loading"
              style="margin-top: 10px"
              :height="800"
               :header-cell-style="{
              background: '#FAFAFA',
              color: 'black',
              'font-size': 15 + 'px',
              'text-align': 'center',
            }"
            >
              <!-- <el-table-column type="selection" width="55" align="center" /> -->
              <el-table-column
                label="模板名称"
                prop="templateName"
                align="center"
              />
              <el-table-column
                label="创建时间"
                prop="createTime"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.createTime }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="默认佣金模板"
                prop="isDefault"
                align="center"
              >
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.isDefault"
                    @click="isDefaultInput(scope.row)"
                    style="cursor: pointer"
                  >
                    <img src="@/assets/img/hk.png" alt="" style="height: 15px"/>
                  </span>
                  <span
                    v-else
                    @click="isDefaultInput(scope.row)"
                    style="cursor: pointer"
                  >
                    <img src="@/assets/img/hk2.png" alt="" style="height: 15px"/>
                  </span>
                  <!-- <el-switch
                    v-model="scope.row.isDefault"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @input="isDefaultInput(scope.row)"
                  >
                  </el-switch> -->
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="editBotton(scope.row)"
                    >修改</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="delData(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>

       
        </el-tab-pane>
      
        <!-- 用户 -->
        <el-tab-pane label="佣金模板" name="0" v-if="userName == '用户'">
          <span slot="label">
            <span
              style="
                display: flex;
                align-items: center;
                font-size: 18px;
                margin-top: 10px;
              "
            >
              <img
                src="@/assets/img/yjmb.png"
                style="width: 20px; height: 20px"
                v-if="activeName === '0'"
              />
              <img
                src="@/assets/img/yjmb2.png"
                style="width: 20px; height: 20px"
                v-else
              />
              <span :class="activeName === '0' ? 'textBox' : 'textBox2'" style="margin-left:5px"
                >佣金模板</span
              >
            </span>
          </span>
          <div class="xhxBox"></div>
          <!-- 查询表单 -->
          <div style="margin: 20px 0px 0px -10px; padding-bottom: 15px">
            <el-form :inline="true" label-position="right" label-width="80px">
              <el-form-item label="模板名称">
                <el-input
                  v-model.trim="queryParams.roleName"
                  placeholder="请输入模板名称"
                  maxlength="20"
                  clearable
                  style="margin-right: 30px; width: 200px"
                ></el-input>
              </el-form-item>

              <el-form-item label="创建时间">
                <el-date-picker
                  v-model="queryParams.dateRange"
                  type="datetimerange"
                  align="right"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 200px; margin-right: 30px"
                  :default-time="['00:00:00', '23:59:59']"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
                <!-- <el-date-picker
                  v-model="queryParams.dateRange"
                  style="width: 200px"
                  value-format="yyyy-MM-dd"
                  type="daterange"
                  range-separator="-"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :picker-options="pickerOptions0"
                ></el-date-picker> -->
              </el-form-item>
              <el-form-item label="" style="margin-left: 40px">
                <el-button
                  icon="el-icon-refresh"
                  style="background: #eeeeee; color: #6396f4; font-weight: bold"
                  @click="resetQuery"
                  >重置
                </el-button>
                <el-button type="primary" icon="el-icon-search" @click="getList(1)"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </div>

          <el-divider></el-divider>
          <!-- tab-表格 -->
          <div style="margin: 20px 0px">
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="projectDataSummary = true"
              >新增模板</el-button
            >
            <div class="exportButton">
              <!-- <el-button
            icon="el-icon-upload2"
            @click="withdrawExport"
            style="margin-bottom: 10px; background: #f5f5f5"
            >导出</el-button
          > -->
            </div>
            <el-table
              :data="roleList"
              v-loading="loading"
              :height="800"
              style="margin-top: 10px"
               :header-cell-style="{
              background: '#FAFAFA',
              color: 'black',
              'font-size': 15 + 'px',
              'text-align': 'center',
            }"
            >
              <!-- <el-table-column type="selection" width="55" align="center" /> -->
              <el-table-column
                label="模板名称"
                prop="templateName"
                align="center"
              />
              <el-table-column
                label="创建时间"
                prop="createTime"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.createTime }}</span>
                </template>
              </el-table-column>
              <el-table-column
                label="默认佣金模板"
                prop="isDefault"
                align="center"
              >
                <template slot-scope="scope">
                  <span
                    v-if="scope.row.isDefault"
                    @click="isDefaultInput(scope.row)"
                    style="cursor: pointer"
                  >
                    <img src="@/assets/img/hk.png" alt="" style="height: 15px"/>
                  </span>
                  <span
                    v-else
                    @click="isDefaultInput(scope.row)"
                    style="cursor: pointer"
                  >
                    <img src="@/assets/img/hk2.png" alt="" style="height: 15px"/>
                  </span>
                  <!-- <el-switch
                    v-model="scope.row.isDefault"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @input="isDefaultInput(scope.row)"
                  >
                  </el-switch> -->
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="editBotton(scope.row)"
                    >修改</el-button
                  >
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="delData(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>

        
        </el-tab-pane>
        <el-tab-pane label="我的成本" name="1" v-if="userName == '用户'">
          <span slot="label">
            <span
              style="
                display: flex;
                align-items: center;
                font-size: 18px;
                margin-top: 10px;
              "
            >
              <img
                src="@/assets/img/mbxq2.png"
                style="width: 20px; height: 20px"
                v-if="activeName === '0'"
              />
              <img
                src="@/assets/img/mbxq.png"
                style="width: 20px; height: 20px"
                v-else
              />
              <span :class="activeName === '0' ? 'textBox2' : 'textBox'" style="margin-left:5px"
                >我的成本</span
              >
            </span>
          </span>
          <div class="xhxBox"></div>
          <div
            class="backgroundBox"
            v-loading="loading"
            element-loading-text="加载中..."
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0,0,0,0.3)"
          >
            <div class="topDiv" style="margin-top: -13px">
              <!-- <div> -->
              <!-- 标题头 -->

              <el-scrollbar style="height: 850px">
                <el-empty
                  :image-size="200"
                  description="暂无结算"
                  v-show="boxList.length <= 0"
                ></el-empty>
                <div class="topDivMiniBox" v-show="boxList.length > 0">
                  <div
                    class="ddbox"
                    v-for="(item, index) in boxList"
                    :key="index"
                  >
                    <el-scrollbar style="height: 100%">
                      <div class="nameBox">
                        <div
                          style="
                            height: 46px;
                            width: 46px;
                            border-radius: 50%;
                            background: #fff7f2;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                          "
                        >
                          <!-- <img :src="require(''+item.icon)" style="width: 20px;height: 20px;"> -->
                          <img
                            :src="item.imgUrl"
                            alt=""
                            style="width: 30px; height: 30px; margin-left: 10px"
                          />
                        </div>
                        <!-- <img :src="item.proLogo" alt="" /> -->
                        <span style="margin-left: 5px">{{
                          item.projectName
                        }}</span>
                      </div>
                      <div class="xtys"></div>
                      <el-empty
                        :image-size="120"
                        description="暂无结算"
                        v-show="item.projectSettleEntityList.length <= 0"
                      ></el-empty>
                      <el-form
                        v-show="item.projectSettleEntityList.length > 0"
                        :model="item"
                        size="medium"
                        label-width="100px"
                        v-for="(item3, index3) in item.projectSettleEntityList"
                        :key="index3"
                      >
                        <el-form-item
                          label="结算名称"
                          prop="field104"
                          style="margin: 9px 0px"
                        >
                          <span style="color: #4d7cf1">{{
                            item3.cpaProjectSettle.settleName
                          }}</span>
                        </el-form-item>
                        <el-form-item
                          label="最大金额"
                          prop="field104"
                          style="margin: 9px 0px"
                        >
                          <span
                            style="color: #4d7cf1; font-size: 25px"
                            v-show="userName == '租户'"
                            >∞</span
                          >
                          <span
                            style="color: #4d7cf1"
                            v-show="userName == '用户'"
                            >{{ item3.settleMax }}</span
                          >
                        </el-form-item>
                        <!-- 条件单选框 -->
                        <!-- <el-form-item label="" prop="field101">
          <el-radio-group v-model="paramList.field101" size="medium">
            <el-radio
              v-for="(item3, index3) in field107Options"
              :key="index3"
              :label="item3.value"
              >{{ item3.label }}</el-radio
            >
          </el-radio-group>
        </el-form-item> -->
                        <el-form-item
                          label="结算金额"
                          prop="field102"
                          v-show="paramList.field101 == 1"
                          style="margin: 9px 0px"
                        >
                          <el-input
                            @change="projectButton(item, item3)"
                            v-model.trim="
                              item3.cpaCommissionTemplateDetails.settlePrice
                            "
                            placeholder="0"
                            clearable
                            disabled
                            maxlength="4"
                            type="text"
                            class="moneyBox"
                            :style="{ width: '90%' }"
                            onkeyup="this.value=this.value.replace(/^(\d*\.?\d{0,2}).*/,'$1')"
                          />
                        </el-form-item>

                        <el-form-item
                          label="条件模板"
                          prop="field103"
                          v-show="paramList.field101 != 1"
                        >
                          <el-select
                            v-model="paramList.field103"
                            placeholder="请选择有条件模板"
                            clearable
                            @change="conditionShow(item.field103)"
                            :style="{ width: '100%' }"
                          >
                            <el-option
                              v-for="(item4, index4) in field109Options"
                              :key="index4"
                              :label="item4.label"
                              :value="item4.value"
                              style="margin: 5px 0px"
                            >
                              <span style="float: left">{{ item4.label }}</span>
                              <span
                                style="
                                  float: right;
                                  color: #8492a6;
                                  font-size: 13px;
                                "
                                ><el-button
                                  type="primary"
                                  size="small"
                                  @click="editButton(item4, index4)"
                                  >编辑</el-button
                                ></span
                              >
                            </el-option>
                            <!-- <el-option
              v-for="(item, index) in field109Options"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option> -->
                          </el-select>
                        </el-form-item>
                      </el-form>
                    </el-scrollbar>
                    <!-- <div style="display: flex">
          <el-button
            type="primary"
            @click="projectButton(item)"
            style="margin: 0px auto"
            >提交</el-button
          >
        </div> -->
                  </div>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </el-tab-pane>
        <pagination
          style="margin: 0px 0px 30px 0px"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="test"
        />
      </el-tabs>
    </el-card>
      <!-- 新增模板弹窗 -->
          <el-dialog
            title="新增模板"
            :visible.sync="projectDataSummary"
            width="30%"
            center
          >
            <el-form
              ref="projectData"
              :model="projectData"
              :rules="projectDatarules"
              size="medium"
              label-width="100px"
               label-position="left"
               @submit.native.prevent
            >
              <el-form-item label="模板名称" prop="field101">
                <el-input
                  maxlength="20"
                  v-model.trim="projectData.field101"
                  placeholder="请输入模板名称"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-form>
            <div slot="footer">
              <el-button @click="projectDataSummary = false">取消</el-button>
              <el-button type="primary" @click="projectButton">确定</el-button>
            </div>
          </el-dialog>
    <!-- 公告弹窗 -->
    <Dialog
      ref="mychild"
      @AddAnnouncement="AddAnnouncement"
      :uelLocation="uelLocation"
    />
  </div>
</template>

<script>
import {
  selectPaging,
  deleteTemplate,
  addTemplate,
  listAPI,
  proUserList,
  getBasisList,
  addDetails,
  getDetails,
  addMoney,
  modifyMoney,
  getTemplateDetails,
  CommissionUpdate,
} from "@/api/projectManagement/index.js";
import { getIdentityAndTopId } from "@/api/login.js";
import { getMoney } from "@/api/base/index.js";
import Dialog from "@/views/components/Dialog.vue";
export default {
  data() {
    return {
      //时间选择器的快捷选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
            disabledDate(time) {
              return time.getTime() > Date.now();
            },
          },
        ],
      },

      // -------------------------------------
      uelLocation: "",
      boxList: [
        // {
        //   // proId: 30,
        //   // proName: "测试汇总",
        //   two: [
        //     { projectId: 26, settleName: "111" },
        //     { projectId: 26, settleName: "222" },
        //   ],
        // },
        // { proId: 21, proName: "大张伟" },
      ],
      projectData: {
        field101: undefined,
      },

      paramList: {
        field101: 1,
        field102: undefined,
        field103: undefined,
        field104: "T1",
      },
      field109Options: [
        {
          label: "创建条件模板",
          value: 1,
        },
        {
          label: "选项二",
          value: 2,
        },
      ],
      field107Options: [
        {
          label: "无条件",
          value: 1,
        },
        {
          label: "有条件",
          value: 2,
        },
      ],

      // -------------------------------------
      //批量打款和记录的切换
      activeName: "0", //second,first
      loading: true,
      //新增模板弹窗
      projectDataSummary: false,

      projectDatarules: {
        field101: [
          {
            required: true,
            message: "请输入模板名称",
            trigger: "change",
          },
        ],
      },
      pickerOptions0: {
        disabledDate(time) {
          // return time.getTime() > Date.now() - 8.64e6;
          return time.getTime() > Date.now(); //选择当前时间之前大约容错10-20分钟
        },
      },
      // 总条数
      total: 0,
      // 表格数据
      roleList: [
        {
          proName: 123,
          cTime: "2021-09-17",
        },
      ],
      // 日期范围
      dateRange: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined,
        dateRange: [],
      },

      userId: "",
      //租户还是用户
      userName: "",
    };
  },
  async created() {
    //        this.queryParams.dateRange[0]=this.moment().format('YYYY')+'-'+this.moment().format('MM')+'-'+"01";
    //  this.queryParams.dateRange[1]=this.moment().format('YYYY-MM-DD');

    this.userId = sessionStorage.getItem("userID") - 0;
    //获取是租户还是用户还是平台
    const { data } = await getIdentityAndTopId();
    console.log(data, "用户信息平台还是租户");
    this.userName = data.identity;
    //公告弹窗
    if (data.identity == "用户") {
      this.AddAnnouncement();
    }
    this.getList();
    this.Template(); //我的模板
  },
  components: { Dialog },
  methods: {
    //默认佣金模板开关
    async isDefaultInput(row) {
      if (row.isDefault) {
        row.isDefault = 0;
      } else {
        row.isDefault = 1;
      }
      // 0是否  1是是
      let param = {
        createUserId: row.createUserId,
        id: row.id,
        isDefault: row.isDefault,
      };
      const data = await CommissionUpdate(param);
      if (data.code == 200) {
        this.$message({
          type: "success",
          message: "提交成功!",
        });
        this.getList();
      } else {
        this.$message.error(data.msg);
      }
      console.log(data, "返回数据");
      //       "id": 0,
      // "isDefault": 0是否 1是是,
    },
    //公告弹窗
    AddAnnouncement() {
      //传递子组件当前的路由；然后调用子组件的事件函数
      this.uelLocation = window.location.pathname.slice(1);
      this.$refs.mychild.gitData();
    },
    test() {
      this.getList();
      this.Template(); //我的模板
    },
    //我的模板
    async Template() {
      console.log(this.userId, "用户id");
      //先用当前用户id查到绑定的项目的id,再用这个id查模板详情
      const templateIdData = await getMoney(this.userId);
      console.log(templateIdData, "用户id");
      if (templateIdData.code == 200 && templateIdData.data) {
        let param = {
          templateId: templateIdData.data.templateId,
          pageNum: this.queryParams.pageNum,
          pageSize: this.queryParams.pageSize,
        };
        const data = await getTemplateDetails(param);
        console.log(data, "我的模版");
        if (data.code == 200) {
          //如果为null那么就会报错,把null赋值为空对象
          data.data.templateDetailsEntityList.forEach((item) => {
            item.projectSettleEntityList.forEach((item2) => {
              if (!item2.cpaCommissionTemplateDetails) {
                item2.cpaCommissionTemplateDetails = {
                  id: "",
                  projectId: "",
                  settleId: "",
                  settlePrice: "",
                  templateId: "",
                };
              }
            });
          });
          // this.boxList = [
          //   {
          //     projectName: "测试项目",
          //     imgUrl:"http://mao.91weiduan.cn/upload/2021/11/24/41f8a756dc33f8f850e595c95a2402d7.jpg",
          //     projectId: 11,
          //     projectSettleEntityList: [
          //       {
          //         cpaProjectSettle: {
          //           id: 25,
          //           projectId: 11,
          //           settleName: "结算1",
          //           settleColumn: "result_ea2903",
          //         },
          //         cpaCommissionTemplateDetails: null,
          //         settleMax: 10,
          //       },
          //     ],
          //   },
          // ];
          this.boxList = data.data.templateDetailsEntityList;
          this.total = data.data.total;
          console.log(this.boxList, "最后");
          this.loading = false;
        }
      }
    },
    //我的模板提交
    //提交按钮
    //提交按钮
    async projectButton(item, item3) {
      console.log(item, "父亲");
      console.log(item3, "儿子");
      if (!item3.cpaCommissionTemplateDetails.id) {
        //新增金额
        let param = {
          projectId: item3.cpaProjectSettle.projectId, //项目id
          settleId: item3.cpaProjectSettle.id, //结算id
          settlePrice: item3.cpaCommissionTemplateDetails.settlePrice, //结算价格
          templateId: this.$route.query.templateId - 0, //项目模板中这个对象的id
        };
        const data = await addMoney(param);
        if (data.code == 200) {
          this.$message({
            type: "success",
            message: "提交成功!",
          });
          this.Template();
        } else {
          this.$message.error("操作失败!");
        }
        console.log(data, "新增返回的值");
      } else {
        //修改金额
        let param = {
          id: item3.cpaCommissionTemplateDetails.id, //id
          projectId: item3.cpaProjectSettle.projectId, //项目id
          settleId: item3.cpaProjectSettle.id, //结算id
          settlePrice: item3.cpaCommissionTemplateDetails.settlePrice, //结算价格
          templateId: this.$route.query.templateId - 0, //项目模板中这个对象的id
        };
        const data = await modifyMoney(param);
        if (data.code == 200) {
          this.$message({
            type: "success",
            message: "提交成功!",
          });
          this.Template();
        } else {
          this.$message.error("操作失败!");
        }
        console.log(data, "修改返回的值");
      }
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    async getList(row) {
      console.log(this.queryParams.dateRange, "获取项目列表22");
      let param = {
        model: {
          startTime: this.queryParams.dateRange[0], //开始时间
          endTime: this.queryParams.dateRange[1], //结束时间
          templateName: this.queryParams.roleName, //模板名称
          createUserId: this.userId, //用户id
        },
        pageSize: this.queryParams.pageSize,
        pageNum: this.queryParams.pageNum,
      };

      const list = await selectPaging(param);
      console.log(list, "获取列表");
      if (list.code == 200) {
        list.data.list.forEach((item) => {
          if (item.isDefault == 1) {
            item.isDefault = true;
          } else {
            item.isDefault = false;
          }
        });
        this.loading = false;
        this.total = list.data.total;
        this.roleList = list.data.list;
      };
      if(row){
         this.$message({
          message: '搜索中...',
          type: 'success'
        });
      }
    },
    //导出
    handleAdd() {},
    //提交按钮
    projectButton() {
      this.$refs["projectData"].validate(async (valid) => {
        if (valid) {
          const data = await addTemplate({
            templateName: this.projectData.field101,
            createUserId: this.userId, //用户id
          });
          console.log(data, "提交按钮");
          if (data.code == 200) {
            this.projectData.field101 = "";
            this.projectDataSummary = false;
            this.getList();
            this.$message({
              type: "success",
              message: "提交成功!",
            });
          } else {
            this.$message.error("操作失败!");
          }
        }
        // TODO 提交表单
      });
    },
    //码设置按钮
    CodeSettingButton(row) {
      console.log(row, "码设置");
      this.$router.push({
        path: "CodeSetting",
        query: {
          typeId: row.typeId,
          four: row.four,
          name: row.proName,
          proId: row.proId,
        },
      });
    },
    //删除
    async delData(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const delData = await deleteTemplate(row.id);
          console.log(delData, "删除");
          if (delData.code == 200) {
            this.getList();
            this.$message({
              type: "success",
              message: "删除成功！",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
      //

      //
    },
    //修改按钮
    editBotton(row) {
      console.log(row, "修改按钮");
      this.$router.push({
        path: "TemplateDetails",
        query: {
          // projectId: this.$route.query.proId-0,  //项目id
          templateId: row.id, //模板对象的id
        },
      });
    },
    //搜索
    handleQuery() {
      console.log(this.queryParams, "搜索");
    },

    //重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined,
        dateRange: [],
      };
      this.getList(1);
      //         this.queryParams.dateRange[0]=this.moment().format('YYYY')+'-'+this.moment().format('MM')+'-'+"01";
      //  this.queryParams.dateRange[1]=this.moment().format('YYYY-MM-DD');
    },
  },
};
</script>

<style scoped lang="scss">

/* 弹窗居中 */
::v-deep .el-dialog__wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
}
::v-deep .el-dialog:not(.is-fullscreen) {
  margin-top: 0vh !important;
}
.textBox {
  color: #4d7cf1;
}
.textBox2 {
  color: rgb(183, 183, 183);
}
.xhxBox {
  border-top: 1px #eee solid;
  height: 1px;
  background: #ffffff;
  margin-top: 14px;
}

// 结算金额
.moneyBox {
  color: #4d7cf1;
}
.backgroundBox {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.topDiv {
  padding: 0px;
  height: auto;
  margin: 0px;
  // background: rgb(255, 255, 255);
  width: 100%;
  // border: 1px red solid;

  .header {
    padding-bottom: 10px;
    border-bottom: 1px #eee solid;
  }
  .topDivMiniBox {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
    height: auto;
    // border: 1px red solid;
    padding: 0px 10px;
  }
  .ddbox {
    padding: 20px 0px;
    margin: 10px 25px 10px 0px;
    overflow: hidden;
    // box-shadow: 0 1px 5px rgba(136, 136, 136, 0.3);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.13);
    width: 380px;
    // height: auto;
    height: 400px;
    border-radius: 10px;
    .nameBox {
      display: flex;
      justify-content: center;
      height: 70px;

      img {
        height: 46px;
        border-radius: 50%;
        margin-right: 10px;
      }
      span {
        //  border:1px red solid;
        text-align: center;
        line-height: 50px;
        font-size: 16px;
        font-weight: bold;
      }
    }
    .xtys {
      width: 90%;
      margin: 0px auto;
      border-bottom: 1px rgb(244, 243, 246) solid;
    }
  }
}
.AlipayBox {
  justify-content: center;
  display: flex;
}
</style>



<style scoped>

::v-deep .el-tabs__header {
  margin: 0px;
  
}
::v-deep .el-tabs__active-bar {
  background: #ffffff;

}
.exportButton {
  /* border: 1px red solid; */
  display: flex;
  justify-content: flex-end;
}
.el-form-item__label {
  font-weight: 500;
}
</style>
<style>
/* 公用样式表格表头高度 */
    .el-table tr {
    height: 55px;
   }
/*  */
.el-scrollbar__wrap {
  overflow-x: hidden;
  /* margin-right: 150px; */
  /* overflow-y: hidden; */
}
.pay .el-date-editor .el-range-separator {
  width: 15%;
}

.pay .el-card__body {
  height: 100%;
}

.pay .pay-item {
  width: 25%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pay .pay-item:not(:last-child) {
  border-right: 1px solid #f0f0f0;
}

.pay .pay-item .pay-value {
  font-size: 24px;
  font-weight: bold;
}

.pay .pay-item .pay-value span {
  font-size: 10px;
  margin-right: -5px;
}

.pay .pay-item .value-color {
  color: #3a77f6;
}

.pay .pay-item .pay-label {
  font-size: 11px;
  margin-top: 10px;
}

.pay .el-divider--horizontal {
  background: #f0f0f0;
}

.pay .el-card__header {
  margin: 0 20px;
  padding-left: 0px;
}

.pay .el-tabs__nav-wrap::after {
  height: 0;
}
</style>
